<section class="">
	<div [ngClass]="['bg' + primary]">
		<div
			class="container flex flex-col items-center px-4 py-16 pb-24 mx-auto text-center lg:pb-56 md:py-32 md:px-10 lg:px-32"
			[ngClass]="['text' + dark]"
		>
			<h1
				class="text-5xl font-bold leading-none sm:text-6xl xl:max-w-3xl"
				[ngClass]="['text' + contrast]"
			>
				Provident blanditiis cum exercitationem
			</h1>
			<p class="mt-6 mb-8 text-lg sm:mb-12 xl:max-w-3xl" [ngClass]="['text' + contrast]">
				Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero
				eaque explicabo!
			</p>
			<div class="flex flex-wrap justify-center">
				<button
					type="button"
					class="px-8 py-3 m-2 text-lg font-semibold rounded"
					[ngClass]="['bg' + default, 'text' + contrastInv]"
				>
					Get started
				</button>
				<button
					type="button"
					class="px-8 py-3 m-2 text-lg border rounded"
					[ngClass]="['border' + neutral, 'text' + contrast]"
				>
					Learn more
				</button>
			</div>
		</div>
	</div>
	<img
		src="https://source.unsplash.com/random/480x320"
		alt=""
		class="w-5/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 bg-gray-500"
	/>
</section>
